<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>

    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");
    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");

    // 全选  => 点击全选 所有的单选跟随全选的状态

    checkAll.onclick = function () {
        var status = this.checked;  //获取全选的状态
        console.log(status);

        // 所有的单选跟随全选的状态 -> 每一个单选跟全选的状态保持一直
        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }
    }


    // 反选 -> 每次点击单选时 判断所有的单选是否都被选中 -> 都选中全选就反选 有一个没选中不能反选

    for (var i = 0; i < checkOneList.length; i++) {  //页面加载时 循环绑定事件
        var checkOne = checkOneList[i];
        checkOne.onclick = function () {
            console.log("点击单选!");

            // checkOneList暂时不能使用every (集合 -> 伪数组 -> 结构和数组类似,但是不能使用数组的方法)

            // 假设法:  判断所有的单选是否都被选中
            // var flag = true; //假设都被选中  -> 有一个未选中就推翻假设
            // for (var j = 0; j < checkOneList.length; j++) {  // 点击遍历每一个单选 ->判断是否存在未选中的
            //     var item = checkOneList[j]; // 每一个单选
            //     // item.checked == false
            //     // !item.checked == true 才能进if => 取反前必须时false
            //     if (!item.checked) {  //如果存在未选中的
            //         flag = false;
            //         break;
            //     }
            // }
            // checkAll.checked = flag;

            var flag = Array.from(checkOneList).every(function (item) {
                return item.checked == true; // 全都选中
            })
            checkAll.checked = flag;
        }
    }

    // (1)加法要求
    //     点击 “+”     输入框  数量 加一
    //     小计更新 = 单价 * 数量
    //     减号按钮的 “-”  出现
    for (let i = 0; i < addList.length; i++) {
        let add = addList[i];
        add.onclick = function () {
            console.log(this);

            // a.  输入框  数量 加一
            var countInput = this.previousElementSibling; // 先获取输入框
            var num = countInput.value; // 取输入框的值 赋值给变量num
            num++;
            countInput.value = num; // 将更新后的结果 赋值给输入框
            // 可以简写
            // countInput.value ++;

            // b. 小计更新 = 单价 * 数量
            // 单价: 从页面获取  (加号的父元素的前一个)
            // 数量: num

            var parentTd = this.parentElement; // 父元素
            var priceTd = parentTd.previousElementSibling; //父元素的前一个
            var subtotalTd = parentTd.nextElementSibling; // 父元素的后一个

            var price = priceTd.textContent * 1;
            var subtotal = price * num;
            subtotalTd.textContent = subtotal.toFixed(2);

            // c.  减号按钮的 “-”  出现
            var reduce = countInput.previousElementSibling;
            reduce.textContent = "-";

        }
    }

    // 减号
    // 点击减号    输入框  数量 减一   （细节要求  数量为1的时候  不再减）
    //            小计更新 = 单价 * 数量 
    //            减之前  判断  如果数量为1  不能减     return false
    //            减之后  判断  如果数量为1  减号按钮的 “-” 消失(2切1)
    for (let i = 0; i < reduceList.length; i++) {
        let reduce = reduceList[i];
        reduce.onclick = function () {

            // a. 输入框  数量 减一   
            var countInput = this.nextElementSibling; // 先获取输入框
            var num = countInput.value; // 取输入框的值 赋值给变量num

            // c. 减之前  判断  如果数量为1  不能减 (不执行后续代码)  
            if (num <= 1) { //最小值判断
                alert("亲,不能再少了");
                return false
            };

            num--;  //自减

            // d. 减之后  判断  如果数量为1  减号按钮的 “-” 消失(2切1)
            if (num <= 1) { // (2切1时 减号按钮文本消失)
                this.textContent = "";
            }

            countInput.value = num; // 将更新后的结果 赋值给输入框

            // b. 小计更新 = 单价 * 数量 

            var parentTd = this.parentElement; // 父元素
            var priceTd = parentTd.previousElementSibling; //父元素的前一个
            var subtotalTd = parentTd.nextElementSibling; // 父元素的后一个

            var price = priceTd.textContent * 1;
            var subtotal = price * num;
            subtotalTd.textContent = subtotal.toFixed(2);
        }
    }






</script>

</html>